<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2024/8/11
  Time: 0:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>登录</title>
  <link type="text/css" rel="stylesheet"
        href="../../bootstrap-4.4.1-dist/css/bootstrap.css">
  <script src="../../bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</head>
<style>
  body::before {
    content: "读万卷书，行万里路";
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: '庞门正道标题体3.0';
    font-size: 24px;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  body {
    background-image: url('../../image/登录背景2.jpeg'); /* 替换为你的图片URL */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; /* 设置背景图片不重复 */
  }


  .container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .logo {
    text-align: center;
    margin-bottom: 20px;
  }

  .logo img {
    width: 100px;
    border-radius: 50%;
  }

  .form-control {
    border-color: #cccccc;
  }

  .btn:hover {
    background-color: #FFD700;
    border-color: #FFD700;
  }

  .btn-sunshine {
    background-color: #FFA500; /* 橙色 */
    border-color: #FFA500;
    color: #000000; /* 黑色 */
  }


</style>
</head>
<body>
<div class="container">
  <div class="logo">
    <img src="../../image/logo.png" alt="Logo"><br>
    <label for="email">SUN 图书馆</label>
  </div>
  <div>
    <div class="form-group">
      <label for="email">邮箱</label>
      <input type="text" class="form-control" id="email" placeholder="请输入账号">
    </div>
    <div class="form-group">
      <label for="pwd">密码</label>
      <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
    </div>
    <div class="form-group">
      <label for="captcha"><a onclick="sendCaptcha()" style="color: blue"
                              id="sendCaptchaText">发送验证码</a></label>
      <input type="text" class="form-control" id="captcha" placeholder="请输入验证码">
    </div>
    <button type="submit" class="btn btn-primary btn-block btn-sunshine" onclick="login()">登录</button>
    <a href="../../html/register/register.html" class="btn btn-primary btn-block btn-sunshine">前往注册</a></div>
</div>
</body>
</html>
<script src="../../js/jquery.js"></script>
<script>
  // 验证码发送
  function sendCaptcha() {
    $.ajax({
      'url': '../../ReaderController/sendCaptcha',
      'type': 'post',
      'data': {},
      'dataType': 'json',
      'success': sendCaptchaSuccess
    })
  }

  function sendCaptchaSuccess(data) {
    if (data == "ok") {
      $('#sendCaptchaText').html("验证码已发送!(重新发送)")
    } else {
      alert("验证码发送失败!")
    }
  }


  //登录
  function login() {
    let email = $('#email').val()
    let pwd = $('#pwd').val()
    let captcha = $('#captcha').val()
    if (loginVerify(email, pwd, captcha)) {
      let opr = "login"
      $.ajax({
        'url': '../../ReaderController/login',
        'type': 'post',
        'data': {email, pwd, captcha},
        'dataType': 'json',
        'success': loginSuccess,
        'async':false
      })
    }

  }

  function loginSuccess(data) {
    if (data == 'ok') {
      alert("登录成功!!!");
      $(location).attr('href', '../../jsp/home/home.jsp')
    } else if (data == 'captchaNo') {
      alert("验证码错误!!!");
    } else if (data == 'loginNo') {
      alert("邮箱或密码错误!!!");
    }
  }


  //登录校验
  function loginVerify(email, pwd, captcha) {
    // 邮箱校验规则
    let emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

    if (email == '') {
      alert("邮箱不可为空！");
      return false;
    } else if (!emailRegex.test(email)) {
      alert("邮箱格式不正确！");
      return false;
    }

    if (pwd == '') {
      alert("密码不可为空！");
      return false;
    }

    if (captcha == '') {
      alert("验证码不可为空！")
    }

    return true;
  }

</script>